<template>
    <div>
         <page-header @toLastPage="toLastPage">
      <template v-slot:right>
        <button class="addBtn">零钱明细</button>
      </template>
        </page-header>
        <div class="moneyInf f-center">
           <div class="jinbi">¥</div>
           <div class="text">我的零钱</div>
           <div class="money">
               <span class="sign">¥</span>
               <span class="moneyNum">{{userInf}}</span>
           </div>
           <div class="tip">转入零钱通 给自己加加薪
               <van-icon name="arrow" />
           </div>
        </div>
        <div class="btn f-center">
            <van-button type="primary" block @click="toRechage">充值</van-button>
            <van-button type="default" block>提现</van-button>
        </div>
        <div class="content-tip">
            <div class="question">常见问题</div>
            <div class="c-tip">本服务由财付通提供</div>
        </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
import { user } from '../../../api/collections/index';
export default {
    components:{
        pageHeader
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        toRechage(){
            this.$router.push('/recharge/'+this.id)
        }
    },
     meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const getUser = user.findOne({_id:this.id})
        if(getUser){
           return Number(getUser.pay).toFixed(2) 
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
    },
    },
    data() {
        return {
            id:this.$route.params.id
        }
    },
}
</script>
<style scoped>
     .addBtn{
        position: relative;
        right: -.5rem;
        background: none;
        border: none;
        outline: none;
        font-size: .6rem;
        padding: .5rem;
    }
    .addBtn:active{
        background-color: #ccc;
    }
    .moneyInf{
        margin-top: 3.5rem;
        flex-direction: column;
    }
    .jinbi{
        border-radius: 100%;
        width: 1.8rem;
        height: 1.8rem;
        text-align: center;
        line-height: 1.8rem;
        background-color: #FDC401;
        color: #fff;
        font-size: 1rem;
    }
    .text{
        margin-top: 1rem;
        font-size: .7rem;
    }
    .money{
        margin-top: .7rem;
    }
    .sign{
        font-weight: 700;
        font-size: 1rem;
        position: relative;
        top: -.4rem;
    }
    .moneyNum{
        font-weight: 700;
        font-size: 1.8rem;
    }
    .tip{
        font-size: .5rem;
        color: #D9A95D;
        margin-top: .5rem;
    }
    .btn{
        margin-top: 7rem;
        flex-direction: column;
    }
    .btn .van-button{
        width: 7rem;
        height: 1.5rem;
    }
    .btn .van-button:last-child{
        margin-top: .6rem;
        background-color: #F3F2F0;
        color: #1D85E;
    }
    .content-tip{
        position: fixed;
        bottom: 1rem;
        left: 0;
        right: 0;
        text-align: center;
    }
    .question{
        color: #575F80;
        font-size: .5rem;
        font-weight: 700;
    }
    .c-tip{
        font-size: .4rem;
        color: #8D8D8B;
        margin-top: .3rem;
    }
</style>